<template>
  <div class="detail_continer">
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <div>
        <Image-preview :src="form.image || ''" width="100%" height='260px'>
        </Image-preview>
      </div>
      <div class="children">
        <el-descriptions direction="vertical" :column="4" border size="medium ">
          <el-descriptions-item label="编号">{{ form.materialNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料名称">{{ form.materialName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ form.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="规格型号">{{ form.model || '-' }} </el-descriptions-item>
          <el-descriptions-item label="单位">{{ form.unitName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <dict-tags :options="SparePartsAndConsumables" :value="form.kind" />
          </el-descriptions-item>
          <el-descriptions-item label="库存预警值">{{ form.lowerLimit || '-' }} ~ {{ form.highLimit || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="采购周期（天）">{{ form.purchaseCycle || '0' }} 天</el-descriptions-item>
          <el-descriptions-item label="单价">{{ form.avgPrice || '****' }}
          </el-descriptions-item>
          <el-descriptions-item label="更换周期（天）">{{ form.replaceCycle || '0' }} 天</el-descriptions-item>
          <el-descriptions-item label="状态">
            <dict-tag :options="statusFlag" :value="form.status" />
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>信息记录</el-divider>
    <el-tabs v-model="tabsname" tab-position="left" @tab-click="handleClickTabs">
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-s-unfold"></i> 入库记录</span>
        <!-- ------------------------------------------------入库记录----------------------------------------------------------------------------- -->
        <transition name="el-zoom-in-top">
          <div v-show="show1">
            <el-table :data="warehousingList" style="width: 100%">
              <el-table-column prop="date" label="序号" width="120">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="入库时间">
                <template slot-scope="{row}">
                  {{ row.warehousing && row.warehousing.confirmTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="类型">
                <template slot-scope="{row}">
                  {{ ['采购入库', '盘盈入库', '还回入库', '其他入库'][row.warehousing && row.warehousing.type] }}
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="数量" />
              <el-table-column prop="price" label="单价（元）" />
              <el-table-column prop="warehousing.storehouseName" label="仓库" show-overflow-tooltip />
              <el-table-column prop="warehousing.warehousingNum" label="关联单号" />
              <el-table-column label="操作员">
                <template slot-scope="{row}">
                  {{ row.warehousing && row.warehousing.confirmBy || '-' }}
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="totalA > 0" :total="totalA" :page.sync="queryParamsA.pageNum"
              :limit.sync="queryParamsA.pageSize" @pagination="getlistWarehousing" />
          </div>
        </transition>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-s-fold"></i> 出库记录</span>
        <!-- ------------------------------------------------出库记录----------------------------------------------------------------------------- -->
        <transition name="el-zoom-in-top">
          <div v-show="show2">
            <el-table :data="listDeliverList" style="width: 100%">
              <el-table-column prop="date" label="序号" width="120">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="出库时间">
                <template slot-scope="{row}">
                  {{ row.deliver && row.deliver.confirmTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="类型">
                <template slot-scope="{row}">
                  {{ ['工单出库', '盘亏出库', '借调出库', '其他出库'][row.deliver && row.deliver.type] }}
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="数量" />
              <el-table-column prop="price" label="单价（元）" />
              <el-table-column prop="deliver.storehouseName" label="仓库" show-overflow-tooltip />
              <el-table-column prop="deliver.deliverNum" label="关联单号" />
              <el-table-column prop="deliver.confirmBy" label="操作员">
                <template slot-scope="{row}">
                  {{ row.deliver && row.deliver.confirmBy || '-' }}
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="totalB > 0" :total="totalB" :page.sync="queryParamsB.pageNum"
              :limit.sync="queryParamsB.pageSize" @pagination="getlistlistDeliver" />
          </div>
        </transition>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-setting"></i> 更换记录</span>
        <!-- ------------------------------------------------更换记录----------------------------------------------------------------------------- -->
        <transition name="el-zoom-in-top">
          <div v-show="show3">
            <el-table :data="ReplaceRecordList" style="width: 100%">
              <el-table-column prop="date" label="序号" width="120">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="设备编号">
                <template slot-scope="{row}">
                  {{ row.equipmentNum || '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="equipmentName" label="设备名称" />
              <el-table-column prop="typeName" label="设备类别" />
              <el-table-column prop="brand" label="设备品牌" />
              <el-table-column prop="useTime" label="换上时间" show-overflow-tooltip />
              <el-table-column prop="useNum" label="换上关联单号" show-overflow-tooltip />
              <el-table-column label="换下时间" show-overflow-tooltip>
                <template slot-scope="{row}">
                  {{ row.removeTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="换下关联单号" show-overflow-tooltip>
                <template slot-scope="{row}">
                  {{ row.removeNum || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="{row}">
                  <div :style="'color:' + ['#67C23A', '#E6A23C'][row.status]">
                    {{ ['使用中', '已换下'][row.status] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="更换数量">
                <template slot-scope="{row}">
                  {{ row.amount || '-' }}
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="totalC > 0" :total="totalC" :page.sync="queryParamsC.pageNum"
              :limit.sync="queryParamsC.pageSize" @pagination="getlistReplaceRecord" />
          </div>
        </transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listDetail, listWarehousing, listDeliver, listReplaceRecord } from '@/api/deviceConsumable/inventory'
export default {
  name: 'detailed',
  props: {
    parentids: {
      type: Object,
      required: true,
      default: () => { }
    },
  },
  data () {
    return {
      form: {},
      tabsname: '1',
      totalA: 0,
      queryParamsA: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'consumableBaseId',
        isAsc: 'desc'//倒叙
      },
      totalB: 0,
      queryParamsB: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'consumableBaseId',
        isAsc: 'desc'//倒叙
      },
      totalC: 0,
      queryParamsC: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'equipmentAccountId',
        isAsc: 'desc'//倒叙
      },
      warehousingList: [],
      listDeliverList: [],
      ReplaceRecordList: [],
      show1: false,
      show2: false,
      show3: false
    }
  },
  created () {
    this.getlist()
    this.getlistWarehousing()
  },
  methods: {
    async getlist () {
      const { data: res } = await listDetail(this.parentids);
      this.form = res.consumableBase
      this.$set(this.form, 'avgPrice', res.avgPrice)
    },
    // 入库
    async getlistWarehousing () {
      this.show1 = true
      const data = Object.assign({}, { 'consPriceAndAmountVo.consumableBaseId': this.parentids.id }, this.queryParamsA)
      const res = await listWarehousing(data)
      this.warehousingList = res.data;
      this.totalA = res.total;
    },
    // 出库
    async getlistlistDeliver () {
      const data = Object.assign({}, { 'consPriceAndAmountVo.consumableBaseId': this.parentids.id }, this.queryParamsB)
      const res = await listDeliver(data)
      this.listDeliverList = res.data
      this.totalB = res.total;
    },
    // 更换记录
    async getlistReplaceRecord () {
      const data = Object.assign({}, { 'consumableBaseId': this.parentids.id }, this.queryParamsC)
      const res = await listReplaceRecord(data)
      this.ReplaceRecordList = res.data
      this.totalC = res.total;
    },
    handleClickTabs (row) {
      if (row.name == 1) {
        this.show1 = true
        this.show2 = false
        this.show3 = false
        this.queryParamsA.pageNum = 1
        this.queryParamsA.pageSize = 10
        this.getlistWarehousing()
      }
      if (row.name == 2) {
        this.show1 = false
        this.show2 = true
        this.show3 = false
        this.queryParamsB.pageNum = 1
        this.queryParamsB.pageSize = 10
        this.getlistlistDeliver()
      }
      if (row.name == 3) {
        this.show1 = false
        this.show2 = false
        this.show3 = true
        this.queryParamsC.pageNum = 1
        this.queryParamsC.pageSize = 10
        this.getlistReplaceRecord()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
  height: 100%;
  display: flex;
}

.dialog_left>div:nth-child(1) {
  flex: 1
}

.dialog_left>div:nth-child(2) {
  flex: 3;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.table_continer_pagination {
  margin-top: 10px;
}


.detail_continer {
  ::v-deep .el-tabs__content {
    padding: 0 20px 20px 20px !important
  }
}
</style>